<template>
  <view style="padding: 20rpx 30rpx;">
    <view 
      class="reglist" 
      v-for="(item,index) in list"
	  :key="index"
	  @click="NeView(item)"
    >
      <view class="order-info">
        <view>{{ item.activityTitle }}</view>
        <view 
          :class="getStatusClass(item.status) + ' status-tag'" 
        >
          {{ getStatusText(item.status) }}
        </view>
      </view>
	  <view class="yy" v-if="item.status == '已取消'">
		  <view class="text">
			  失败原因：{{item.reviewReason}}</view>
	  </view>
      <view :class="getStatusClass(item.status) + ' lbe'">
        <view>活动时间：</view>
        <view>{{item.activityTime}}</view>
      </view>
      <view class="lbe">
        <view>活动地址：</view>
        <view>{{ item.activityAddress || item.activityTitle }}</view>
      </view>
      <view class="lbe">
        <view>联系人姓名：</view>
        <view>{{ item.name }}</view>
      </view>
      <view class="lbe">
        <view>联系人电话：</view>
        <view>{{ item.phone }}</view>
      </view>
      <view class="lbe">
        <view>报名人数：</view>
        <view>1人</view>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view class="loading-status" v-if="loading">
      <view class="loading-animation">
        <view class="loading-dot" v-for="i in 3" :key="i"></view>
      </view>
      <view class="loading-text">加载中...</view>
    </view>
    
    <view class="no-more-data" v-if="noMoreData">
      <view class="no-more-text">已加载全部内容 </view>
    </view>
  </view>
</template>

<script>
import { activityRegistration } from '@/core/api/index.js'
import { mapState } from 'vuex';
export default {
  data() {
    return {
      list: [],
      page: 1,            // 当前页码
      pageSize: 10,       // 每页数量
      total: 0,           // 总数据量
      loading: false,     // 加载中状态
      noMoreData: false   // 无更多数据状态
    }
  },
  onLoad() {
    this.loadData(); // 初始化加载第一页数据
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo
    })
  },
  onReachBottom() {
    // 触底时加载更多（非加载中且有更多数据时）
    if (!this.loading && !this.noMoreData) {
      this.loadMore();
    }
  },
  methods: {
	  NeView(itme){
		  console.log(itme)
		  uni.navigateTo({
		  	  url:'/pages/my/registrationdatalist?itme=' + encodeURIComponent(JSON.stringify(itme))
		  })
	  },
    // 获取状态文本
    getStatusText(status) {
      if (status === '待确认') return '待审核';
      if (status === '已取消') return '报名失败';
      return '报名成功';
    },
    // 获取状态类名
    getStatusClass(status) {
      if (status === '待确认') return 'status-pending';
      if (status === '已取消') return 'status-failed';
      return 'status-success';
    },
    // 加载数据
    async loadData() {
      this.loading = true;
      try {
        const params = {
          page: this.page,
          size: this.pageSize,
		  condition: {
			  userId: this.userInfo.id
		  }
        };
        const { data } = await activityRegistration(params);
        // 处理返回数据
        if (this.page === 1) {
          this.list = data.records || [];
        } else {
          this.list = [...this.list, ...(data.records || [])];
        }
        
        this.total = data.total || 0;
        console.log(this.list,'打印')
        // 判断是否还有更多数据
        if (this.list.length >= this.total) {
          this.noMoreData = true;
        } else {
          this.page++; // 准备加载下一页
        }
      } catch (error) {
        console.error('加载失败', error);
      } finally {
        this.loading = false;
      }
    },
    // 加载更多
    loadMore() {
      this.loadData();
    }
  }
}
</script>

<style lang="scss">
.reglist {
  background-color: #fff;
  margin-bottom: 10rpx;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.order-info {
  display: flex;
  justify-content: space-between;
  padding: 24rpx 25rpx;
  border-bottom: 1rpx solid #F5F5F5;
  margin-bottom: 20rpx;
}

.order-info view:first-child {
  font-size: 28rpx;
  color: #333;
  font-weight: 700;
  width: 460rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yy{
	display: flex;
	    justify-content: flex-end;
		padding: 0rpx 25rpx 20rpx;
	.text{
		// width: t;
		    width: fit-content;
		border-radius: 32rpx;
		font-size: 22rpx;
		background: #EFEFEF;
		padding: 16rpx 30rpx;
	}
}

/* 状态标签样式 */
.status-tag {
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 1.2;
}

.status-pending {
  // background-color: rgba(242, 107, 46, 0.1);
  color: #F26B2E;
}

.status-success {
  // background-color: rgba(51, 51, 51, 0.1);
  color: #333;
}

.status-failed {
  // background-color: rgba(163, 163, 163, 0.1);
  color: #A3A3A3 !important;
}

.lbe {
  display: flex;
  padding: 0rpx 25rpx 30rpx;
  justify-content: space-between;
  font-size: 28rpx;
  view:nth-child(1) {
    color: #666;
    width: 160rpx;
	flex: 1;
  }
  view:nth-child(2) {
    width: 460rpx;
    text-align: right;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* 加载状态样式 */
.loading-status {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
}

.loading-animation {
  width: 40rpx;
  height: 40rpx;
  position: relative;
  margin-right: 15rpx;
}

.loading-dot {
  position: absolute;
  width: 10rpx;
  height: 10rpx;
  background-color: #F26B2E;
  border-radius: 50%;
  animation: loading-dot 1.2s infinite ease-in-out;
}

.loading-dot:nth-child(1) {
  top: 0;
  left: 0;
  animation-delay: -0.4s;
}

.loading-dot:nth-child(2) {
  top: 0;
  right: 0;
  animation-delay: -0.2s;
}

.loading-dot:nth-child(3) {
  bottom: 0;
  left: 0;
  animation-delay: 0s;
}

.loading-text {
  font-size: 24rpx;
  color: #999;
}

.no-more-data {
  text-align: center;
  padding: 60rpx 0;
  color: #999;
  font-size: 28rpx;
}

.no-more-text {
  display: inline-block;
  padding: 10rpx 20rpx;
  background-color: #F5F5F5;
  border-radius: 30rpx;
}

@keyframes loading-dot {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.5);
    opacity: 0.5;
  }
}
</style>